<template>
    <div class="s" ref="bscroll">
        <div class="list">
            <input v-model="putVal" type="text" name="" id="" placeholder="请输入城市名称或拼音">
        </div> 
        <div class="search-content" ref="wrapper" v-show="putVal">
            <ul>

               <li v-for="(item,index) in list" :key="index">{{item.name}}</li>

               <li v-for="(item,index) in list" :key="index" @click="click1(item.name)">{{item.name}}</li>

               <li class="search-item" v-show="flag">没有匹配到数据</li>
            </ul>
        </div>
    </div>
</template>
<script>
import BScroll from 'better-scroll'
    export default{
        name:'Search',
        props:{
            cities:Object
        },
        data(){
            return{
                putVal:"",
                list:[]
            }
        },
        computed:{
            flag(){
                return !this.list.lenth
            }
        },
         methods:{
            click1(city){
                this.$store.dispatch("changecity",city);
                this.$router.push("/")
            }
        },
        watch:{
            putVal(){
                var result=[];
                for(var i in this.cities){
                    this.cities[i].forEach((val)=>{
                        if(val.name.indexOf(this.putVal)> -1 || val.spell.indexOf(this.putVal)>-1){
                            result.push(val)
                        }
                    })
                }
                this.list=result;
            }
        },
        mouted (){
           this.scroll=new BScroll(this.$refs.wrapper)
        }
    }
</script>
<style lang="stylus">
    .list{
        width 100%
        height 50px
        background #00BCD4
        line-height 50px
        margin 0
        padding 0
        input{
            width 80%
            height 30px
            border-radius 10px
            text-align center
        }
    }
    
    .search-content{
        background #cacaca
        width 100%
        height 800px
        position absolute
        top 130px
        left 0
        bottom 0
        z-index 1
        overflow hidden
    }
    .search-content ul li{
        width 100%
        height 40px
        border-bottom:1px solid #999
        line-height 40px
        color:#666 
        text-align left 
        text-indent .2rem
        background-color #fff
    }
</style>